import * as echarts from "echarts";
import {useState,useEffect} from "react";
import axios from 'axios'
import './visitor.css'
export default function App(){
      let [city, setcity] = useState([])
 useEffect(()=>{
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      title: {
        text: '用户分布',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: city.beijing, name: '北京' },
            { value: city.shanghai, name: '上海' },
            { value: city.shenzhen, name: '深圳' },
            { value: city.hangzhou, name: '杭州' },
            { value: city.qita, name: '其他' }
          ],
          color:['#c23531',
                '#2f4554',
                '#61a0a8',
                '#d48265',
                '#91c7ae'],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    
    option && myChart.setOption(option);
      axios.get('https://elm.cangdu.org/v1/user/city/count').then(res => {
            console.log(res);
            if (res.data.status == 1) {
                city = res.data.user_city
                setcity(city)
            }
        })
 },[])

    return <div id="main"></div>
}